<template>
        <q-table
            :data="data"
            :columns="columns"
            row-key="id"
            class="myTable scroll stick-last-col"
            :loading="loading"
            :pagination.sync="pagination"
            :hide-bottom="data.length > 0"
            no-data-label="暂无数据"
            color="primary"
          >
        <template v-slot:header="props">
            <q-tr>
              <q-th v-for="(item, index) in props.cols" :key="index">
                  <slot v-if="item.isHeader" :name="`header-${item.name}`" :props="item"></slot>
                  <div v-else :style="{ textAlign: item.align }">
                    {{item.label}}
                  </div>
              </q-th>
            </q-tr>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props">
              <q-td v-for="(item, index) in props.cols" :key="index">
                  <div v-if="item.isSlot">
                    <slot :name="item.name" :props="props"></slot>
                  </div>
                  <div v-else>
                    {{props.row[item.name]}}
                  </div>
              </q-td>
          </q-tr>
        </template>
        <template v-slot:no-data>
            <div class="full-width row flex-center font-size-14" style="color: #999">
              暂无数据
            </div>
        </template>
        </q-table>
</template>
<script>
export default {
  name: 'yz-table',
  props: {
    columns: Array,
    data: Array,
    loading: Boolean,
    pagination: Object,
    slotList: {
      type: Array,
      default () {
        return []
      }
    },
    headers: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
    }
  },
  watch: {},
  methods: {
    setSlot (item) {
      return this.slotList.includes(item.name)
    },
    setHeader (item) {
      console.log(item)
      return this.headers.includes(item.name)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
